import React, { useState } from 'react'
import {
    Radio,
    Divider
} from 'antd'
import Swiper from './components/Swiper'
import Navigation from './components/Navigation'
import Search from './components/Search'
import Announcement from './components/Announcement'
import RichText from './components/RichText'
import All from './components/All'
import DisplayAdvertising from './components/DisplayAdvertising'
import Audio from './components/Audio'
import Video from './components/Video'
import Form from './components/Form'
import Shop from './components/Shop'
import ContactCustomer from './components/ContactCustomer'
import SecondKill from './components/SecondKill'
import './index.less'
const RenderProps = (props) => {
    const { active, data } = props
    const { list = [], selectIndex } = data
    if (active === 'all') {
        return <All {...props}></All>
    }
    else {
        const selectData = list[selectIndex]
        if (selectData && (selectIndex === 0 || selectIndex)) {
            const { type } = selectData
            if (type === 'swiper') {
                return <Swiper selectData={selectData} {...props}></Swiper>
            } else if (type === 'navigation') {
                return <Navigation selectData={selectData} {...props}></Navigation>
            } else if (type === 'search') {
                return <Search selectData={selectData} {...props}></Search>
            } else if (type === 'displayAdvertising') {
                return <DisplayAdvertising selectData={selectData} {...props}></DisplayAdvertising>
            } else if (type === 'richText') {
                return <RichText selectData={selectData} {...props}></RichText>
            } else if (type === 'announcement') {
                return <Announcement selectData={selectData} {...props}></Announcement>
            } else if (type === 'audio') {
                return <Audio selectData={selectData} {...props}></Audio>
            } else if (type === 'video') {
                return <Video selectData={selectData} {...props}></Video>
            } else if (type === 'form') {
                return <Form selectData={selectData} {...props}></Form>
            } else if (type === 'shop') {
                return <Shop selectData={selectData} {...props}></Shop>
            } else if (type === 'contactCustomer') {
                return <ContactCustomer selectData={selectData} {...props}></ContactCustomer>
            } else if (type === 'secondKill') {
                return <SecondKill selectData={selectData} {...props}></SecondKill>
            }
        }
        return null
    }

}
const DraweiSettting = (props) => {
    const { data, setData, edit } = props
    const { active } = data
    return <div className='DraweiSettting_box'>
        <div className='editor-type-box'>
            <Radio.Group onChange={(e) => {
                edit({
                    active: e.target.value
                })
            }} value={active}>
                <Radio.Button value={'all'}>页面设置</Radio.Button>
                <Radio.Button value={'components'}>组件设置</Radio.Button>
            </Radio.Group>

        </div>
        <Divider></Divider>
        <div className='editor-content-body'>
            <RenderProps active={active} {...props}></RenderProps>
        </div>

    </div>
}
export default  DraweiSettting